<template>
    <div class="index">
        <Layout v-if="data">
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            系统首页
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="overview">
                    <div class="card">
                        <i class="icon iconfont icon-order1"></i>
                        <div class="card-title">
                            <p class="line-h">今日订单总数</p>
                            <p class="num line-h">{{data.all ? data.all : 0}}</p>
                        </div>
                    </div>
                    <div class="card">
                        <i class="icon iconfont icon-money"></i>
                        <div class="card-title">
                            <p class="line-h">今日交易总额</p>
                            <p class="num line-h">￥{{data.sum ? data.sum : 0}}</p>
                        </div>
                    </div>
                    <div class="card">
                        <i class="icon iconfont icon-coins"></i>
                        <div class="card-title">
                            <p class="line-h">近7天交易总额</p>
                            <p class="num line-h">￥{{data.seven_sum ? data.seven_sum : 0}}</p>
                        </div>
                    </div>
                    <!-- <div>
                        <i class="icon iconfont icon-yue"></i>
                        <div class="card-title">
                            <p class="line-h">账户余额</p>
                            <p class="num line-h">￥{{data}}</p>
                        </div>
                    </div> -->
                </div>
                <div class="card-order">
                    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                        <div class="ivu-card-head">
                            <p data-v-57b29fc1="">订单管理</p>
                        </div>
                        <div class="ivu-card-body"> 
                            <div class="card-con-one">
                                <p class="one-order" @click="linkOrder(1)">
                                    <span class="order-title">待付款订单</span>
                                    <span class="order-title">（<span class="red">{{data.s1 ? data.s1 : 0}}</span>）</span>
                                </p>
                                <p class="one-order" @click="linkOrder(3)">
                                    <span class="order-title">待服务订单</span>
                                    <span class="order-title">（<span class="red">{{data.s2 ? data.s2 : 0}}</span>）</span>
                                </p>
                                <p class="one-order" @click="linkOrder(4)">
                                    <span class="order-title">服务中订单</span>
                                    <span class="order-title">（<span class="red">{{data.s3 ? data.s3 : 0}}</span>）</span>
                                </p>
                            </div>
                            <div class="card-con-one">
                                <p class="one-order" @click="linkOrder(6)">
                                    <span class="order-title">已完成订单</span>
                                    <span class="order-title">（<span class="red">{{data.s4 ? data.s4 : 0}}</span>）</span>
                                </p>
                                <p class="one-order" @click="linkOrder(7)">
                                    <span class="order-title">已取消订单</span>
                                    <span class="order-title">（<span class="red">{{data.s5 ? data.s5 : 0}}</span>）</span>
                                </p>
                                <p class="one-order" @click="linkOrder(8)">
                                    <span class="order-title">已关闭订单</span>
                                    <span class="order-title">（<span class="red">{{data.s6 ? data.s6 : 0}}</span>）</span>
                                </p>
                            </div>
                            <div class="card-con-one">
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-income">
                    <Row :gutter="20">
                        <Col :span="12">
                            <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                                <div class="ivu-card-head">
                                    <p data-v-57b29fc1="">收入总览</p>
                                </div>
                                <div class="ivu-card-body"> 
                                    <div class="income-one">
                                        <h1 class="red">{{data.p1}}</h1>
                                        <p>今日增加</p>
                                    </div>
                                    <div class="income-one">
                                        <h1 class="red">{{data.p2}}</h1>
                                        <p>昨日增加</p>
                                    </div>
                                    <div class="income-one">
                                        <h1 class="red">{{data.p3}}</h1>
                                        <p>本月增加</p>
                                    </div>
                                    <div class="income-one">
                                        <h1 class="red">{{data.p4 > 100000 ? Math.floor(data.p4 / 10000) + '万' : data.p4}}</h1>
                                        <p>全部收入</p>
                                    </div>
                                </div>
                            </div>
                        </Col>
                        <Col :span="12">
                            <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                                <div class="ivu-card-head">
                                    <p data-v-57b29fc1="">用户总览</p>
                                </div>
                                <div class="ivu-card-body"> 
                                    <div class="income-one">
                                        <h1 class="red">{{data.u1}}</h1>
                                        <p>今日新增</p>
                                    </div>
                                    <div class="income-one">
                                        <h1 class="red">{{data.u2}}</h1>
                                        <p>昨日新增</p>
                                    </div>
                                    <div class="income-one">
                                        <h1 class="red">{{data.u3}}</h1>
                                        <p>本月新增</p>
                                    </div>
                                    <div class="income-one">
                                        <h1 class="red">{{data.u4}}</h1>
                                        <p>会员总数</p>
                                    </div>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </div>

            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    
    </div>
</template>

<script>
import * as api from '@/api/api'
export default {
    data() {
        return {
            host: window.location.host,
            loading: this.$store.state,
            data:''
        }
    },

    created() {
        this.getData()
    },

    methods: {
        linkOrder(id) {
            this.$router.push({name: 'OrderList',params:{state:id}});
            this.$parent.$children[0].openMenu = '4-1'
        },
        getData() {
            this.loading.isLoading = true;
            api.getIndexData().then(res => {
                this.loading.isLoading = false;
                if(res.data.code === 200) {
                    this.data = res.data.data;
                }
                
            })
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../assets/styles/constant.less';
    .index{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .overview{
                display: flex;
                justify-content: space-between;
                .card{
                    border: 1px solid #ddd;
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    width: 22%;
                    min-width: 220px;
                    border-radius: 8px;
                    .icon{
                        font-size: 54px;
                        color: @greenColor;
                    }
                    .card-title{
                        margin-left: 20px;
                        color: #999;
                        font-size: 16px;
                    }
                    .line-h{
                        margin-top: 4px;
                        line-height: 30px;
                    }
                    .num{
                        font-size: 18px;
                        color: #333;
                    }
                }
            }
            .card-order{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    display: flex;
                    justify-content: space-between;
                }
                .card-con-one{
                    flex: 1;
                    margin-right: 40px;
                    .one-order{
                        height: 40px;
                        line-height: 40px;
                        border-bottom: 1px solid #eee;
                        display: flex;
                        justify-content: space-between;
                        &:hover {
                            color: @greenColor !important;
                            cursor: pointer;
                        }
                        .order-title{
                            cursor: pointer;
                        }
                        .order-title:hover{
                            // color: @greenColor;
                        }
                        .red{
                            color: red;
                        }
                        .red:hover{
                            color: @greenColor;
                        }
                    }
                }
            }
            .card-income{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    display: flex;
                    justify-content: space-between;
                    .income-one{
                        padding: 10px 10px;
                        text-align: center;
                        .red{
                            color: #f04844;
                            font-weight: normal;
                        }
                    }
                }
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>
